<template>
	<el-table :data="databases" style="width: 100%;height: 100%;" stripe>
		<el-table-column prop="dbname" label="数据库名" />
		<el-table-column prop="dbnote" label="概述" />
		<el-table-column prop="ip" label="IP" />
		<el-table-column prop="port" label="端口" />
		<el-table-column prop="department" label="来源部门" />
		<el-table-column label="操作">
			<template #default="scope">
				<el-button link type="primary" size="small" @click="onChoose(scope.row.dbname)">连接</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-dialog v-model="dialogFormVisible" title="连接数据库">
		<el-form :model="form" label-width="120px" style="width: 60%;">
			<el-form-item label="用户名">
				<el-input v-model="form.name" />
			</el-form-item>
			<el-form-item label="密码">
				<el-input v-model="form.passwd" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogFormVisible = false">Cancel</el-button>
				<el-button type="primary" @click="onSubmit">
					Confirm
				</el-button>
			</span>
		</template>
	</el-dialog>
</template>
  
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Api from '@/util/axios'
import { useDatabase } from '@/stores/databaseStore'
import { Success } from '../../util/message'

const dialogFormVisible = ref(false)

const router = useRouter()
const databases = ref([])
const form = reactive({
	"name": "root",
	"passwd": "500500Aa!",
	"dbname": ""
})
// let { proxy } = getCurrentInstance();
onMounted(() => {
	Api.post('show_db').then((res) => {
		databases.value = res
	})
})
const onChoose = (dbname) => {
	dialogFormVisible.value = true
	form.dbname = dbname
}
const onSubmit = () => {
	Api.post('login', form
	).then((res) => {
		Success('连接成功')
		const database = useDatabase()
		database.name = form.dbname
		database.raw = res.data
		router.push({ name: 'table' })
	})
}
</script>